import { Button, Checkbox, Form, Input } from 'antd';
import React from 'react';

const FormCom: React.FC = () => {
  //1. 获得 form 对象
  let [form] = Form.useForm();
  const onFinish = (values: any) => {
    //第一种获取方式, 通过形参直接获得
    // console.log('Success:', values);
    //第二种方式, 调用 form 的方法
    //3. 获取表单元素的值
    let result = form.getFieldsValue();
    console.log(result);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const test = () => {
    //修改表单元素的值
    form.setFieldsValue({
      username: '你好',
      password: 'xfaefawefwa'
    });
  }

  return (
    <Form
    // 2. 设置 form 属性
      form={form}
      name="basic"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 10 }}
      initialValues={{ remember: true}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入您的用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入您的密码' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={test}>修改表单元素的值</Button>
      </Form.Item>
    </Form>
  );
};

export default FormCom;